<!--
 * @Date: 2025-02-28 10:06:36
 * @LastEditors: MsChen Your email MsChen
 * @LastEditTime: 2025-02-28 11:26:02
 * @FilePath: /finance/Users/chenyufan/Downloads/框架/glm-mes-pc-ui/glm-mes-pc-MES_框架/src/views/logistics/order.vue
-->

<script setup>
import { onMounted, ref, reactive, computed,watch } from 'vue'
import {
	sendOrderApi, getChildOrderListAPI, cancelMergeOrders, mergeOrders, getListAPI, getAddSFExpressAPI, getAddJDExpressAPI, getPriceQueryAPI, getAdddhlExpressAPI, getInternationalAPI, sfExpressBarcode, jdExpressBarcode,
	getAreaListAPI
} from '@/api/wuliuOrder.js'


const { proxy } = getCurrentInstance()
const { wl_wp_type } = proxy.useDict('wl_wp_type')
const { wl_status } = proxy.useDict('wl_status')
const { wl_type } = proxy.useDict('wl_type')
import { ElLoading, ElMessage } from 'element-plus'

const loading = ref(false); // 定义 loading 状态

const formRef = ref()
const form = ref({
	orderNo: '',
	waybillNo: '',
	recName: '',
	sendName: '',
})
const dialogVisible = ref(false)
const dialogMergeVisible = ref(false)
const dialogSelectKdVisible = ref(false)

const dataList = ref([])
const mergedataList = ref([])
const dateRange = ref([])

const pagination = ref({
	total: 0,
	pageSize: 10,
	pageNum: 1
})
//重量
let weight = ref(null)
const ids = ref([])
const multiple = ref(true)

// 定义全局变量来存储选中的订单的快递公司名称
const selectedKuaidicomName = ref('')

async function onSearch(params) {

	const mergedData = ref({
		...params,
		...pagination.value,
		...form.value
	})

	const { code, rows, total } = await getListAPI(mergedData.value)
	if (code == 200) {
		dataList.value = rows
		pagination.value.total = total
	}
}

const handleSizeChange = () => {
	console.log('111')
}
const handlePageChange = (val) => {
	pagination.value.pageNum = val
	onSearch()
}
onMounted(() => {
	onSearch()
})

import { ElMessageBox } from 'element-plus'
//
const handleClose = (done) => {
	ElMessageBox.confirm('是否确定关闭新增订单?')
		.then(() => {
			done()
		})
		.catch(() => {
			// 新增页面隐藏
			dialogVisible.value = false
		})
}

const formSize = ref('default')


// 寄快递部分数据
// 寄件人

let smStartTimes = ref('')

const ruleForm = reactive({
	sendName: "",
	sendPhone: "",
	sendAddressDetail: "",
	recName: "",
	recPhone: "",
	recAddressDetail: "",
	payType: "",
	cargo: "",
	kuaidicom: "",
	kuaidicomName: "",
	smStartTime: "",
	smEndTime: "",
	type: "1",
	price: 0,
	remark: "订单备注",
	weight: 0,
    expType: "",
	num: 1,
	sendCityListName: [], // 用于存储选中的省市区的值
  recCityListName: [], // 用于存储选中的省市区的值
	//国际快递新增的参数
	sendCountryCode: '',
	sendCityName: '',
	sendZipCode: '',
	recCountryCode: '',
	recCityName: '',
	recZipCode: ''
})
const sendForm = reactive({
	kuaidicom: "jd",
	kuaidicomName: "京东",
	price: 0,
	weight: 0,
	sendAddressDetail: "",
	recAddressDetail: ""

})
// 选择快递部分切换效果
const isActive = ref(false);
const isSiblingActive = ref(false);
//切换快递
const toggleClass = async () => {
;
    if(ruleForm.sendCityListName.length == 0){
        ElMessage({
			   message: '请选择寄件人地区',
			  type: 'warning',
		   	duration: 2000
		   })
    }
    if(ruleForm.recCityListName.length == 0){
        ElMessage({
            message: '请选择收件人地区',
            type: 'warning',
            duration: 2000
        })
    }

	ruleForm.kuaidicomName = '京东'
    // 更新产品类型
    // cptypelist.value = kuaidiTypeLists.jd
    console.log(cptypelist.value +"更新产品类型京东更新产品类型京东更新产品类型京东更新产品类型京东更新产品类型京东更新产品类型京东")
	isActive.value = !isActive.value;
	isSiblingActive.value = false;
	let prices = reactive({
		kuaidicom: 'jd',
		sendAddr: ruleForm.sendCityListName.join('')+ruleForm.sendAddressDetail,
		recAddr: ruleForm.recCityListName.join('')+ruleForm.recAddressDetail,
		weight: ruleForm.weight
	})



	let { data, code } = await getPriceQueryAPI(prices)
	if (code == 200) {
        if(data){
            ruleForm.price = data[0].price
        }else{
            ruleForm.price= 0
        }

	}

};

// 定义快递类型列表
const kuaidiTypeLists = {
    jd: [
        '京东标快',
        '京东特快'
    ],
    shunfengtrd: [
        '顺丰特快', '顺丰标快', '顺丰卡航', '同日达', '半日达'
    ],
    shunfeng: [
        '顺丰特快', '顺丰标快', '顺丰卡航'
    ],
};

// 监听 ruleForm.kuaidicomName 的变化
// watch(
//     () => ruleForm.kuaidicomName,
//     (newVal) => {
//         if (kuaidiTypeLists[newVal]) {
//             cptypelist.value = kuaidiTypeLists[newVal];
//         }
//         console.log(`快递公司已切换为：${newVal}`);
//     },
//     { immediate: true } // 初始化时立即执行一次
// );
//

const toggleSiblingClass = async (index) => {

    if(ruleForm.sendCityListName.length == 0){
        ElMessage({
            message: '请选择寄件人地区',
            type: 'warning',
            duration: 2000
        })
    }
    if(ruleForm.recCityListName.length == 0){
        ElMessage({
            message: '请选择收件人地区',
            type: 'warning',
            duration: 2000
        })
    }
	ruleForm.kuaidicomName = '顺丰'
    // cptypelist.value = kuaidiTypeLists.shunfeng;
    // console.log(cptypelist.value +"顺丰那个你那个你刚刚")
	isSiblingActive.value = !isSiblingActive.value;
	isActive.value = false;
	let prices = reactive({
		kuaidicom: 'shunfeng',
      sendAddr: ruleForm.sendCityListName.join('')+ruleForm.sendAddressDetail,
      recAddr: ruleForm.recCityListName.join('')+ruleForm.recAddressDetail,
		weight: ruleForm.weight
	})
	let { data, code } = await getPriceQueryAPI(prices)
	if (code == 200) {
      if(data){
          ruleForm.price = data[0].price
      }else{
          ruleForm.price= 0
      }
	}

}
let cptypelist = ref([
])

watch(
    [() => ruleForm.kuaidicomName,
        () => ruleForm.sendCityListName,
        () => ruleForm.recCityListName],
    (newvaluelist)=>{
        if(newvaluelist[0] == '京东'){
            cptypelist.value = kuaidiTypeLists.jd;
        }
        if(newvaluelist[0] == '顺丰'){
            console.log(newvaluelist[1][1],newvaluelist[2][1],"mmmmmmmmmmmmmmmm")
            if(newvaluelist[1][1] &&  newvaluelist[1][1] == newvaluelist[2][1]){
                cptypelist.value = kuaidiTypeLists.shunfengtrd;
            }else{
                cptypelist.value = kuaidiTypeLists.shunfeng;
            }
            if(!cptypelist.value.includes(ruleForm.expType)){
                ruleForm.expType=""
            }

        }


},{immediate:true})


const rules = reactive({
	//寄件人验证输入
	sendName: [
		{ required: true, message: '请输入寄件人姓名', trigger: 'blur' },
	],
	sendCityName: [
		{ required: true, message: '请输入寄件人地址', trigger: 'blur' },
	],
    recCityListName: [
        { required: true, message: '请输入寄件人地区', trigger: 'blur' },
    ],

    sendCityListName: [
        { required: true, message: '请输入发件人地区', trigger: 'blur' },
    ],
	sendCountryCode: [
		{ required: true, message: '请选择寄件人国家', trigger: 'change' },
	],
	sendPhone: [
		{ required: true, message: '请输入手机号码', trigger: 'blur' },
		{ min: 11, max: 11, message: '请输入有效手机号码', trigger: 'blur' },
	],
	sendAddressDetail: [
		{ required: true, message: '请输入详细地址', trigger: 'blur' },
	],
	sendZipCode: [
		{ required: true, message: '请输入寄件人邮政', trigger: 'blur' },
	],
	//收件人验证输入
	recName: [
		{ required: true, message: '请输入收件人姓名', trigger: 'blur' }
	],
	recCountryCode: [
		{ required: true, message: '请选择收件人国家', trigger: 'change' },
	],
	recPhone: [
		{ required: true, message: '请输入手机号码', trigger: 'blur' },
		{ min: 11, max: 11, message: '请输入有效手机号码', trigger: 'blur' },
	],
	recAddressDetail: [
		{ required: true, message: '请输入详细地址', trigger: 'blur' }
	],
	recZipCode: [
		{ required: true, message: '请输入收件人邮政', trigger: 'blur' },
	],
	// 预约上门时间
	smStartTimes: [
		{ required: true, message: '请选择预约上门时间', trigger: 'change' },
	],
	// 支付方式
	payType: [
		{ required: true, message: '请选择支付方式', trigger: 'change' },
	],
	// 物品类型
	cargo: [
		{ required: true, message: '请选择物品类型', trigger: 'change' },
	],
})

const sendrules = reactive({
	kuaidicom: [
		{ required: true, message: '请选择快递公司', trigger: 'blur' }
	],
	kuaidicomName: [
		{ required: true, message: '请选择快递公司', trigger: 'blur' }
	],

})

const activeName = ref('first')

const handleClick = (tab, event) => {
	console.log(tab, event)
}

import dayjs from 'dayjs'

//新增订单
const submitForm = async (formEl) => {
	ruleForm.smStartTime = dayjs().format('YYYY-MM-DD HH:mm');
	ruleForm.smEndTime = dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm');
	console.log(ruleForm.recZipCode);
	if (ruleForm.kuaidicomName == '京东') {
		ruleForm.kuaidicom = 'jd'
	} else if (ruleForm.kuaidicomName == '顺丰') {
		ruleForm.kuaidicom = 'shunfeng'
	} else if (ruleForm.kuaidicomName == 'DHL') {
		ruleForm.kuaidicom = 'dhl'
	}
	// 检查必填项
	const requiredFields = {
		sendName: ruleForm.sendName,
		sendPhone: ruleForm.sendPhone,
		sendAddressDetail: ruleForm.sendAddressDetail,
		recName: ruleForm.recName,
		recPhone: ruleForm.recPhone,
		recAddressDetail: ruleForm.recAddressDetail,
		payType: ruleForm.payType,
		smStartTime: ruleForm.smStartTime,
		cargo: ruleForm.cargo,
		kuaidicomName: ruleForm.kuaidicomName,
		kuaidicom: ruleForm.kuaidicom,
		sendZipCode: ruleForm.sendZipCode,
		recZipCode: ruleForm.recZipCode,
	};

	// 判断是否有未填的必填项
	const missingFields = Object.keys(requiredFields).filter(key => !requiredFields[key]);
	if (missingFields.length > 2) {
		// 显示警告消息
		ElMessage.warning('请填写所有必填项!');
		return;
	}
	// 额外判断 cargo 是否未选择
	if (ruleForm.cargo === '未选择') {
		ElMessage.warning("请选择货物信息。");
	}

	if (ruleForm.kuaidicomName == '顺丰') {
      if(ruleForm.sendCityListName.length>0){
          ruleForm.sendAddressDetail=ruleForm.sendCityListName.join('')+ruleForm.sendAddressDetail
      }
      if(ruleForm.recCityListName.length>0){
          ruleForm.recAddressDetail=ruleForm.recCityListName.join('')+ruleForm.recAddressDetail
      }
		const res = await getAddSFExpressAPI(ruleForm)
		console.log(res);
	} else if (ruleForm.kuaidicomName == '京东') {
      if(ruleForm.sendCityListName.length>0){
          ruleForm.sendAddressDetail=ruleForm.sendCityListName.join('')+ruleForm.sendAddressDetail
      }
      if(ruleForm.recCityListName.length>0){
          ruleForm.recAddressDetail=ruleForm.recCityListName.join('')+ruleForm.recAddressDetail
      }
		const res = await getAddJDExpressAPI(ruleForm)
		console.log(res);
	} else if (ruleForm.kuaidicomName == 'DHL') {
		let res = await getAdddhlExpressAPI(ruleForm)
		console.log(res);
	}
	onSearch()
	dialogVisible.value = false

	// 清空必填项的数据
	ruleForm.payType = '';
	ruleForm.smStartTime = '';
	ruleForm.cargo = '';

}

//物品信息
const information = (item) => {
	console.log(item);
	ruleForm.cargo = item
}
const selectCp=(item)=>{
    ruleForm.expType = item
}
//寄付方式
const Paymentmethod = [
	{
		value: 'SHIPPER',
		label: '寄方付',
	},
	{
		value: 'CONSIGNEE',
		label: '到付',
	},
	{
		value: 'MONTHLY',
		label: '月结',
	}
]

const kuaidiComList = [
	{
		value: 'jd',
		label: '京东',
	},
	{
		value: 'shunfeng',
		label: '顺丰',
	},
]

//寄国际-----------------------------------------------------------------------------------
const countryoptions = [
	{
		value: 'CN',
		label: '中国',
	},
	{
		value: 'ID',
		label: '印度尼西亚',
	},
	{
		value: 'PT',
		label: '葡萄牙',
	},
	{
		value: 'DK',
		label: '丹麦',
	},
	{
		value: 'LU',
		label: '卢森堡',
	},
	{
		value: 'HR',
		label: '克罗地亚',
	},
	{
		value: 'UA',
		label: '乌克兰',
	},
	{
		value: 'HU',
		label: '匈牙利',
	},
	{
		value: 'US',
		label: '美国',
	},
	{
		value: 'UY',
		label: '乌拉圭',
	},
	{
		value: 'IN',
		label: '印度',
	},
	{
		value: 'MX',
		label: '墨西哥',
	},
	{
		value: 'IT',
		label: '意大利',
	},
	{
		value: 'MY',
		label: '马来西亚',
	},
	{
		value: 'ES',
		label: '西班牙',
	},
	{
		value: 'AR',
		label: '阿根廷',
	},
	{
		value: 'BR',
		label: '巴西',
	},
	{
		value: 'CL',
		label: '智利',
	},
	{
		value: 'CO',
		label: '哥伦比亚',
	},
	{
		value: 'PE',
		label: '秘鲁',
	},
]
// 快递
//获取国际快递地址解析
//地址参数
let chengshi = reactive({
	sendcity: '',
	sendroute: '',
	reccity: '',
	recroute: '',
})


let senddhlparameter = reactive({
	countryCode: 'CN',
	address: ruleForm.sendCityName,
	language: 'en'
})
let recdhlparameter = reactive({
	countryCode: 'CN',
	address: ruleForm.recCityName,
	language: 'en'
})
const getsendDHLlist = async () => {
	console.log(senddhlparameter);

	let res = await getInternationalAPI(senddhlparameter)
	console.log(res);

}
const getrecDHLlist = async () => {
	let res = await getInternationalAPI(recdhlparameter)
	console.log(res);

}

const togDHlClass = async (index) => {
	ruleForm.kuaidicomName = 'DHL'
	ruleForm.type = 3
	isSiblingActive.value = !isSiblingActive.value;
	isActive.value = false;
	getsendDHLlist()
	getrecDHLlist()
	let prices = reactive({
		kuaidicom: 'dhl',
		sendAddr: ruleForm.sendAddressDetail,
		recAddr: '221B Baker Street, London, NW1 6XE, United Kingdom',
		weight: ruleForm.weight,
	})
	let { data, code } = await getPriceQueryAPI(prices)
	if (code == 200) {
		ruleForm.price = data[0].price
	}

}

// 多选框选中数据
const selectedWaybillNo = ref('')
function handleSelectionChange(selection) {
	ids.value = selection.map(item => item.id)
	multiple.value = !selection.length
	// 获取选中的订单的第一个快递公司
	if (selection.length > 0) {
		const selectedOrder = selection[0];
		const kuaidicomName = selectedOrder.kuaidicomName;
		selectedKuaidicomName.value = kuaidicomName;
		// 获取选中的订单的运单号
		const waybillNo = selectedOrder.waybillNo;
		selectedWaybillNo.value = waybillNo;
		if (kuaidicomName == '顺丰') {
			generateJSFBarCode()
		} else if (kuaidicomName == '京东') {
			generateJDBarCode()
		}
	}
	generateQRCode()
}


const sendParam = {
	id: "",
	sendType: "",
	kuaidicom: "",
	kuaidicomName: "",
	price: 0,
}
//发货操作
let sendoutgoods = (index, row) => {
	console.log(index, row)
	var sendType = row.mergeStatus == 'MAIN' ? '2' : '1'
	var type = row.type;
	sendParam.id = row.id
	sendParam.sendType = sendType
	if (type == '1' && sendType == '2') {
		// 选择快递公司  重新评估费用
		sendForm.weight = row.weight
		sendForm.sendAddressDetail = row.sendAddressDetail
		sendForm.recAddressDetail = row.recAddressDetail
		// 评估价格
		pgprice()
		dialogSelectKdVisible.value = true
	} else {
		confirmSendoutgoods()
	}

}
const confirmSendoutgoods = () => {
	proxy.$modal
		.confirm('是否确认要发货?')
		.then(async function () {
			let res = await sendOrderApi(sendParam)
			console.log(res);
		})
		.then(() => {
			onSearch()
			proxy.$modal.msgSuccess('发货成功')
			dialogSelectKdVisible.value = false
		})
		.catch(() => { })

}

function submitSendForm() {

	proxy.$refs['sendFormRef'].validate((valid) => {
		if (valid) {
			sendParam.kuaidicom = sendForm.kuaidicom
			sendParam.kuaidicomName = sendForm.kuaidicomName
			sendParam.price = sendForm.price
			confirmSendoutgoods()
		}
	})
}


const handleMearge = () => {
	const selectids = ids.value;
	if (selectids.length < 2) {
		proxy.$modal.msgError('请选择要合并的数据')
		return
	}
	proxy.$modal
		.confirm('是否确认合并选择的数据项?')
		.then(async function () {
			let res = await mergeOrders(selectids)
			console.log(res);
		})
		.then(() => {
			onSearch()
			proxy.$modal.msgSuccess('合并成功')
		})
		.catch(() => { })

}

const cancelHandleMergeOrders = (row) => {
	const selectids = row.id;
	proxy.$modal
		.confirm('是否确认合并选择的数据项?')
		.then(async function () {
			const cancelparem = {
				mergedOrderId: selectids
			}
			let res = await cancelMergeOrders(cancelparem)
			console.log(res);
		})
		.then(() => {
			onSearch()
			proxy.$modal.msgSuccess('取消成功')
		})
		.catch(() => { })

}

const getKuaidiComCode = async (value) => {
	if (value == '京东') {
		sendForm.kuaidicom = 'jd'
	} else if (value == '顺丰') {
		sendForm.kuaidicom = 'shunfeng'
	}
	pgprice()

}

const pgprice = async () => {
	let prices = reactive({
		kuaidicom: sendForm.kuaidicom,
		sendAddr: sendForm.sendAddressDetail,
		recAddr: sendForm.recAddressDetail,
		weight: sendForm.weight,

	})
	// }
	//这里加一个loading 遮罩
	sendForm.price = 0
	let { data, code } = await getPriceQueryAPI(prices)
	sendForm.price = data[0].price
}

// 打印
import printJS from 'print-js';
const printExpressSheet = async () => {
	if (ids.value.length == 0) {
		proxy.$modal.msgError('请选择要打印的订单');
		return;
	} else if (ids.value.length > 1) {
		proxy.$modal.msgError('只能选择一条订单进行打印');
		return;
	}

	const selectedOrder = dataList.value.find(order => order.id === ids.value[0]);
	if (!selectedOrder.waybillNo) {
		proxy.$modal.msgError('该订单没有发货');
		return;
	}

	const printableArea = document.getElementById('printableArea');
	const JDprintableArea = document.getElementById('JDprintableArea');

	if (selectedOrder.kuaidicomName == '顺丰') {
		printableArea.classList.add('show');
		await printJS({
			printable: printableArea,
			type: 'html',
			targetStyles: ['*'],
		});
		printableArea.classList.remove('show');
	} else if (selectedOrder.kuaidicomName == '京东') {
		JDprintableArea.classList.add('show');
		await printJS({
			printable: JDprintableArea,
			type: 'html',
			targetStyles: ['*'],
		});
		JDprintableArea.classList.remove('show');
	} else {
		proxy.$modal.msgError('该快递公司暂不支持打印');
		return;
	}
};

const showMergeOrders = async (row) => {
	const mergedOrderId = row.id;
	dialogMergeVisible.value = true
	mergedataList.value = []
	const mergedOparem = {
		mergedOrderId: mergedOrderId
	}
	let res = await getChildOrderListAPI(mergedOparem)
	mergedataList.value = res.data
	console.log(res, "数据");
}

// 获取寄件人地区
const getCity = async () => {
	const addressDetailBlur = ruleForm.sendAddressDetail;
	if (typeof addressDetailBlur !== "string") {
		addressDetailBlur = String(addressDetailBlur);
	}
	console.log("获取的详细地址为:", addressDetailBlur);
	if (ruleForm.sendAddressDetail === "") {
		proxy.$modal.msgError('请选择寄件人国家');
		return;
	}
	const { data: { data: { result: { district, postcode } } } } = await getInternationalAPI({
		countryCode: ruleForm.sendCountryCode,
		address: ruleForm.sendAddressDetail,
		language: 'en'
	});

	// 将解析后的地址信息赋值给 ruleForm 相关字段
	ruleForm.sendCityName = district;
	ruleForm.sendZipCode = postcode;
	console.log(ruleForm.sendCityName);

}
// 获取收件人地区
const recAddressDetailBlur = async () => {

	const addressDetailBlur = ruleForm.recAddressDetail;
	if (typeof addressDetailBlur !== "string") {
		addressDetailBlur = String(addressDetailBlur);
	}
	if (ruleForm.sendAddressDetail === "") {
		proxy.$modal.msgError('请选择收件人国家');
		return;
	}
	const { data: { data: { result: { district, postcode } } } } = await getInternationalAPI({
		countryCode: ruleForm.recCountryCode,
		address: ruleForm.recAddressDetail,
		language: 'en'
	});

	// 将解析后的地址信息赋值给 ruleForm 相关字段
	ruleForm.recCityName = district;
	ruleForm.recZipCode = postcode;
	console.log(ruleForm.recCityName);

};

// 二维码
import qrcode from 'qrcode';
const generateQRCode = () => {
	let qrCodeData = '';
	if (selectedKuaidicomName.value === '顺丰') {
		qrCodeData = 'https://www.sf-express.com/chn/sc/ship/home'; // 二维码内容
	} else if (selectedKuaidicomName.value === '京东') {
		qrCodeData = 'https://www.jdl.com/send/sendSingleEntry/?isCnet=1'; // 二维码内容
	}
	// 创建画布元素
	const canvas = document.createElement('canvas');
	if (selectedKuaidicomName.value === '京东') {
		// 生成二维码到画布
		qrcode.toCanvas(canvas, qrCodeData, { width: 300 }, (err) => {
			if (err) {
				console.error(err);
				return;
			}
			// 获取绘图上下文
			const context = canvas.getContext('2d');

			// 绘制的文字
			const text = '月';

			// 绘制一个圆形背景
			context.fillStyle = '#FFFFFF'; // 背景填充为白色
			const centerX = canvas.width / 2;
			const centerY = canvas.height / 2;
			const radius = 40; // 圆的半径

			context.beginPath();
			context.arc(centerX, centerY, radius, 0, Math.PI * 2); // 绘制圆形
			context.closePath();
			context.fill(); // 填充圆形

			// 设置文字样式
			context.font = 'bold 30px Arial';
			context.fillStyle = 'black'; // 文字颜色为黑色
			context.textAlign = 'center';
			context.textBaseline = 'middle';

			// 在圆形背景的中心绘制文字
			context.fillText(text, centerX, centerY);

			// 将绘制后的二维码转为 base64
			const finalQRCodeUrl = canvas.toDataURL();

			// 保存二维码 URL
			ruleForm.shunfengQrCodeUrl = finalQRCodeUrl;
		});

	} else if (selectedKuaidicomName.value === '顺丰') {
		// 生成二维码到画布
		qrcode.toCanvas(canvas, qrCodeData, { width: 300 }, (err) => {
			if (err) {
				console.error(err);
				return;
			}

			// 将绘制后的二维码转为 base64
			const finalQRCodeUrl = canvas.toDataURL();

			// 保存二维码 URL
			ruleForm.shunfengQrCodeUrl = finalQRCodeUrl;
		});
	}
};

// 生效时间
const effectiveTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
// 失效时间
const failureTime = dayjs().add(1, 'year').format('YYYY-MM-DD HH:mm:ss');

// 条形码
// 顺丰条形码
const msg = ref('')
const generateJSFBarCode = async () => {
	// 获取当前订单的运输单号
	const waybillNo = selectedWaybillNo.value;
	const { msg } = await sfExpressBarcode({
		'waybillNo': waybillNo
	})
	// 保存条形码 URL
	ruleForm.shunfengBarCodeUrl  = "data:image/png;base64,"+msg;;
}


// 京东条形码
const generateJDBarCode = async () => {
	// 获取当前订单的运输单号
	const waybillNo = selectedWaybillNo.value;
	const { msg } = await jdExpressBarcode({
		"waybillNo": waybillNo
	})
    ruleForm.shunfengBarCodeUrl  = "data:image/png;base64,"+msg;;
}


// // 详情
const showDetails = ref(false) // 作为状态变量来控制详情页的显示
const selectedOrder = ref(null) // 存储选中的订单信息

// 添加这个方法来显示详情页
const displayDetails = (ids) => {
	if (ids.length !== 1) {
		proxy.$modal.msgError('请选择一个订单查看详情')
		return
	}
	// 获取到选中的订单信息
	const selectedOrders = dataList.value.filter(order => order.id === ids[0]);
	console.log(selectedOrders);
	if (selectedOrders.length > 0) {
		selectedOrder.value = selectedOrders[0]; // 只显示第一个
	}
	showDetails.value = true; // 显示详情对话框
}

// 获取省市区数据
const cityOptions = ref([]); // 初始化 cityOptions
const getCityOptions = async () => {
	const { rows } = await getAreaListAPI();
	let obj = rows
	let list = obj.filter(item => {
		if (item.parentId === null) return item
	})

	// 整理数据为级联选择器需要的格式
	list.map(async province => {
		province.value = province.name
		province.label = province.name
		province.children = await childrenComp(province.id, rows)

		province.children.map(async city => {
			city.value = city.name
			city.label = city.name
			city.children = await childrenComp(city.id, rows)
		})
	});
	cityOptions.value = list
	console.log('省数据', list);
}

const childrenComp = (id, rows, cb) => {
	let list = rows.filter(item => item.parentId == id)
	list.map(async item => {
		item.value = item.name
		item.label = item.name
		item.children = []
	})
	cb ? cb() : ''
	return list
}

onMounted(() => {
	getCityOptions();
});

</script>
<template>
	<div>
		<div class="card">
			<el-form :ref="formRef" :inline="true" :model="form" class="search-form">

				<el-form-item label="下单时间：">
					<el-date-picker v-model="form.orderStartTime" type="date" range-separator="至" placeholder="请选择日期"
						start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD" />
				</el-form-item>
				<el-form-item label="至：">
					<el-date-picker v-model="form.orderEndTime" type="date" range-separator="至" placeholder="请选择日期"
						start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYYMMDD" />
				</el-form-item>
				<el-form-item label="订单号：" prop="orderNo">
					<el-input v-model="form.orderNo" placeholder="请输入订单号" clearable />
				</el-form-item>
				<el-form-item label="运单号：" prop="waybillNo">
					<el-input v-model="form.waybillNo" placeholder="请输入运单号" clearable />
				</el-form-item>
				<el-form-item label="寄件人" prop="sendName">
					<el-input v-model="form.sendName" placeholder="请输入寄件人姓名" clearable />
				</el-form-item>
				<el-form-item label="收货人" prop="recName">
					<el-input v-model="form.recName" placeholder="请输入收货人姓名" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch">搜索</el-button>
					<el-button type="primary" size="default">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="card">
			<div class="btns">
				<el-button type="primary" @click="dialogVisible = true">新增订单</el-button>
				<el-button type="primary" @click="printExpressSheet">打印快递单</el-button>
				<el-button type="primary" @click="handleMearge">合并订单</el-button>
				<el-button type="primary" @click="displayDetails(ids)">详情</el-button>
			</div>
			<div>
				<el-dialog v-model="dialogVisible" width="1200" :before-close="handleClose">
					<template #footer>
						<div>
							<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
								<el-tab-pane label="寄快递" name="first">
									<div style="text-align: left;">填写收寄件人信息</div>
									<div>
										<div>
											<div class="above">
												<h5 class="sender-fontwant">寄件人</h5>
											</div>
											<div>
												<el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm"
													:rules="rules" label-width="auto" class="demo-ruleForm"
													:size="formSize" status-icon>
													<div>
														<el-form-item label="寄件人姓名:" prop="sendName">
															<el-input v-model="ruleForm.sendName" placeholder="请输入姓名" />
														</el-form-item>
														<el-form-item label="寄件人地区:" prop="sendCityListName">
															<el-cascader :options="cityOptions"
																v-model="ruleForm.sendCityListName" placeholder="请选择寄件人地区" />
														</el-form-item>
													</div>
													<div>
														<el-form-item label="联系电话:" prop="sendPhone">
															<el-input v-model="ruleForm.sendPhone"
																placeholder="请输入手机号" />
														</el-form-item>
														<el-form-item label="详细地址:" prop="sendAddressDetail">
															<el-input v-model="ruleForm.sendAddressDetail"
																placeholder="请输入详细地址" />
														</el-form-item>
													</div>
												</el-form>
											</div>
										</div>
										<div>
											<div class="above">
												<h5 class="sender-fontwant">收件人</h5>
											</div>
											<div>
												<el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm"
													:rules="rules" label-width="auto" class="demo-ruleForm"
													:size="formSize" status-icon>
													<div>
														<el-form-item label="收件人姓名:" prop="recName">
															<el-input v-model="ruleForm.recName" placeholder="请输入姓名" />
														</el-form-item>
														<el-form-item label="收件人地区:" prop="recCityListName">
															<el-cascader :options="cityOptions"
																v-model="ruleForm.recCityListName" placeholder="请选择收件人地区" />
														</el-form-item>
													</div>
													<div>
														<el-form-item label="联系电话:" prop="recPhone">
															<el-input v-model="ruleForm.recPhone"
																placeholder="请输入手机号" />
														</el-form-item>
														<el-form-item label="详细地址:" prop="recAddressDetail">
															<el-input v-model="ruleForm.recAddressDetail"
																placeholder="请输入详细地址" />
														</el-form-item>
													</div>
												</el-form>
											</div>
										</div>
										<div>
											<div class="above">
												<h5 class="sender-fontwant">物品信息</h5>
<!--												<span>什么不能寄？</span>-->
											</div>
											<div class="wp">
												<el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm"
													:rules="rules" label-width="auto" class="demo-ruleForm"
													:size="formSize" status-icon>
													<el-form-item label="物品类型:" prop="cargo">
														<div style="width: 100%;display: flex;align-items: center;">
															<el-button v-for="dict in wl_wp_type" :key="dict.value"
                                         :type="ruleForm.cargo === dict.label ? 'primary' : ''"
																:label="dict.value" @click="information(dict.label)">{{
																	dict.label
																}}</el-button>
														</div>
													</el-form-item>

													<div
														style="width: 100%;display: flex;align-items: center;margin-top: 10px;">
														<span>预估重量：</span>
														<el-space>
															<el-input-number v-model="ruleForm.weight" :min="1"
																:max="30">
															</el-input-number>
														</el-space>
														<span style="color: #abb1b2;">上限30公斤</span>
														<div class="number-plea">
															<span>数量：</span>
															<el-input-number v-model="ruleForm.num" :min="1"
																:max="9999" />
														</div>
													</div>
													<div class="navigation" style="width: 1100px;">
														实际重量会计算体积重并以快递员确认为准
													</div>
												</el-form>
											</div>
										</div>

										<div>
											<div class="above">
												<h5 class="sender-fontwant">快递选择</h5>
											</div>
											<div class="expressdeliveryfelx">
												<div class="expresssmo" @click="toggleClass">
													<div :class="{ 'active': isActive }">京东</div>
													<div><span class="express-number">{{ ruleForm.kuaidicomName === '京东'
														? ruleForm.price : 0 }}</span>元</div>
												</div>
												<div class="expresssmo" @click="toggleSiblingClass">
													<div :class="{ 'active': isSiblingActive }">顺丰</div>
													<div><span class="express-number">{{ ruleForm.kuaidicomName === '顺丰'
														? ruleForm.price : 0 }}</span>元</div>
												</div>
											</div>
											<div>
												<el-form ref="ruleFormRef" style="max-width: 1200px;margin-top: 30px" :model="ruleForm"
													:rules="rules" label-width="auto" class="demo-ruleForm"
													:size="formSize" status-icon>
                            <div>
														<el-form-item label="预约上门时间:" prop="smStartTimes">
															<el-date-picker v-model="ruleForm.smStartTimes"
																type="datetime" placeholder="请选择预约上门时间" />
														</el-form-item>
													</div>
													<div>
														<el-form-item label="支付方式:" prop="payType">
															<el-select v-model="ruleForm.payType" clearable
																placeholder="请选择支付方式" style="width: 240px">
																<el-option v-for="item in Paymentmethod"
																	:key="item.value" :label="item.label"
																	:value="item.value" />
															</el-select>
														</el-form-item>
													</div>

												</el-form>
											</div>
                        <div>
                            <el-form ref="ruleFormRef" style="max-width: 1200px;margin-top: 10px;padding-left:20px;justify-content: space-between" :model="ruleForm"
                                     :rules="rules" label-width="auto" class="demo-ruleForm"
                                     :size="formSize" status-icon>

                                <el-form-item label="产品类型:" prop="expType">
                                        <el-button v-for="item in cptypelist" :key="item"
                                                   :type="ruleForm.expType === item ? 'primary' : ''"
                                                   :label="item" @click="selectCp(item)">{{
                                            item
                                            }}</el-button>

                                </el-form-item>
                            </el-form>
                        </div>
										</div>
									</div>
									<div class="above"  style="margin-bottom: 30px">
										<div class="wp">预计运费：<b style="color: #ff810e;">{{ ruleForm.price }}元</b></div>
										<el-button type="primary" @click="submitForm(ruleFormRef)">
											立即下单
										</el-button>
									</div>
								</el-tab-pane>
								<el-tab-pane label="寄国际" name="jgj">
									<div style="text-align: left;">填写收寄件人信息</div>
									<div>
										<div>
											<div class="above">
												<h5 class="sender-fontwant">寄件人</h5>
											</div>
											<div>
												<el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm"
													:rules="rules" label-width="auto" class="demo-ruleForm"
													:size="formSize" status-icon>
													<div>
														<el-form-item label="寄件人姓名:" prop="sendName">
															<el-input v-model="ruleForm.sendName" placeholder="请输入姓名" />
														</el-form-item>
														<el-form-item label="寄件人国家:" prop="sendCountryCode">
															<el-select v-model="ruleForm.sendCountryCode" clearable
																placeholder="请选择寄件人国家" style="width: 240px">
																<el-option v-for="item in countryoptions"
																	:key="item.value" :label="item.label"
																	:value="item.value" />
															</el-select>
														</el-form-item>
														<el-form-item label="寄件人地区:" prop="sendCityName">
															<el-input v-model="ruleForm.sendCityName"
																placeholder="选择城市" />
														</el-form-item>
													</div>
													<div>
														<el-form-item label="联系电话:" prop="sendPhone">
															<el-input v-model="ruleForm.sendPhone"
																placeholder="请输入手机号" />
														</el-form-item>
														<el-form-item label="详细地址:" prop="sendAddressDetail">
															<el-input v-model="ruleForm.sendAddressDetail"
																placeholder="请输入详细地址" @blur="sendAddressDetailBlur" />
															<el-button type="primary" size="size"
																@click="getCity">获取地区</el-button>
														</el-form-item>

														<el-form-item label="寄件人邮政:" prop="sendZipCode">
															<el-input v-model="ruleForm.sendZipCode"
																placeholder="请输入寄件人邮政" />
														</el-form-item>
													</div>
												</el-form>
											</div>
										</div>
										<div>
											<div class="above">
												<h5 class="sender-fontwant">收件人</h5>
											</div>
											<div>
												<el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm"
													:rules="rules" label-width="auto" class="demo-ruleForm"
													:size="formSize" status-icon>
													<div>
														<el-form-item label="收件人姓名:" prop="recName">
															<el-input v-model="ruleForm.recName" placeholder="请输入姓名" />
														</el-form-item>
														<el-form-item label="收件人国家:" prop="recCountryCode">
															<el-select v-model="ruleForm.recCountryCode" clearable
																placeholder="请选择寄件人国家" style="width: 240px">
																<el-option v-for="item in countryoptions"
																	:key="item.value" :label="item.label"
																	:value="item.value" />
															</el-select>
														</el-form-item>
														<el-form-item label="收件人地区:" prop="recCityName">
															<el-input v-model="ruleForm.recCityName"
																placeholder="选择城市" />
														</el-form-item>
													</div>
													<div>
														<el-form-item label="联系电话:" prop="recPhone">
															<el-input v-model="ruleForm.recPhone"
																placeholder="请输入手机号" />
														</el-form-item>
														<el-form-item label="详细地址:" prop="recAddressDetail">
															<el-input v-model="ruleForm.recAddressDetail"
																placeholder="请输入详细地址" @blur="recAddressDetailBlur" />
															<el-button type="primary" size="size"
																@click="recAddressDetailBlur">获取地区</el-button>
														</el-form-item>
														<el-form-item label="收件人邮政:" prop="recZipCode">
															<el-input v-model="ruleForm.recZipCode"
																placeholder="请输入收件人邮政" />
														</el-form-item>
													</div>
												</el-form>
											</div>
										</div>
										<div>
											<div class="above">
												<h5 class="sender-fontwant">物品信息</h5>
												<span>什么不能寄？</span>
											</div>
											<div class="wp">
												<el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm"
													:rules="rules" label-width="auto" class="demo-ruleForm"
													:size="formSize" status-icon>
													<el-form-item label="物品类型:" prop="cargo">
														<div style="width: 100%;display: flex;align-items: center;">
															<el-button v-for="dict in wl_wp_type" :key="dict.value"
                                         :type="ruleForm.cargo === dict.label ? 'primary' : ''"
																:label="dict.value" @click="information(dict.label)">{{
																	dict.label
																}}</el-button>
														</div>
													</el-form-item>
													<div
														style="width: 100%;display: flex;align-items: center;margin-top: 10px;">
														<span>预估重量：</span>
														<el-space>
															<el-input-number v-model="ruleForm.weight" :min="1"
																:max="30">
															</el-input-number>
														</el-space>
														<span style="color: #abb1b2;">上限30公斤</span>
														<div class="number-plea">
															<span>数量：</span>
															<el-input-number v-model="ruleForm.num" :min="1"
																:max="9999" />
														</div>
													</div>
													<div class="navigation" style="width: 1100px;">
														实际重量会计算体积重并以快递员确认为准
													</div>
												</el-form>
											</div>
										</div>

										<div>
											<div class="above">
												<h5 class="sender-fontwant">快递选择</h5>
											</div>
											<div class="expressdeliveryfelx">
												<div class="expresssmo" @click="togDHlClass">
													<div :class="{ 'active': isActive }">DHl国际物流</div>
													<div><span class="express-number">{{ ruleForm.price }}</span>元</div>
												</div>
											</div>
											<div>
												<el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm"
													:rules="rules" label-width="auto" class="demo-ruleForm"
													:size="formSize" status-icon>
													<div>
														<el-form-item label="预约上门时间:" prop="smStartTimes">
															<el-date-picker v-model="ruleForm.smStartTimes"
																type="datetime" placeholder="请选择预约上门时间" />
														</el-form-item>
													</div>
													<div>
														<el-form-item label="支付方式:" prop="payType">
															<el-select v-model="ruleForm.payType" clearable
																placeholder="请选择支付方式" style="width: 240px">
																<el-option v-for="item in Paymentmethod"
																	:key="item.value" :label="item.label"
																	:value="item.value" />
															</el-select>
														</el-form-item>
													</div>
												</el-form>
											</div>
										</div>
									</div>
									<div class="above">
										<div class="wp">预计运费：<b style="color: #ff810e;">{{ ruleForm.price }}元</b></div>
										<el-button type="primary" @click="submitForm(ruleFormRef)">
											立即下单
										</el-button>
									</div>
								</el-tab-pane>
							</el-tabs>
						</div>
					</template>
				</el-dialog>
			</div>
			<div>
				<el-dialog v-model="dialogMergeVisible" width="1200">
					<template #footer>
						<el-table :data="mergedataList" style="width: 100%" border>
							<el-table-column prop="orderNo" label="订单号" width="180" />
							<el-table-column prop="waybillNo" label="运单号" width="300" />
							<el-table-column prop="status" label="订单状态" width="180">
								<template #default="scope">
									<dict-tag :options="wl_status" :value="scope.row.status" />
								</template>
							</el-table-column>
							<el-table-column prop="kuaidicomName" label="快递公司" width="180" />
							<el-table-column prop="cargo" label="物品" />
							<el-table-column prop="num" label="数量" />
                <el-table-column prop="expType" label="产品类型" />
							<el-table-column prop="weight" label="总重量" width="180" />
							<el-table-column prop="orderTime" label="下单时间" width="180" />
							<el-table-column prop="sendName" label="寄件人" width="180" />
							<el-table-column prop="sendPhone" label="寄件人手机" width="200" />
							<el-table-column prop="sendAddressDetail" label="寄件人地址" width="300" />
							<el-table-column prop="recName" label="收件人姓名" width="200" />
							<el-table-column prop="recPhone" label="收件人手机" width="200" />
							<el-table-column prop="recAddressDetail" label="收件人地址" width="300" />
							<el-table-column prop="smStartTime" label="预约取货时间" width="300" />
							<el-table-column prop="sendTime" label="发货时间" width="300" />
						</el-table>
					</template>
				</el-dialog>
			</div>

			<div>
				<el-dialog v-model="dialogSelectKdVisible" width="800">
					<template #footer>
						<el-form ref="sendFormRef" :model="sendForm" label-width="120px" :rules="sendrules">
							<el-form-item label="快递公司:" prop="kuaidicomName">
								<el-select v-model="sendForm.kuaidicomName" clearable @change="getKuaidiComCode"
									placeholder="请选择快递编码" style="width: 240px">
									<el-option v-for="item in kuaidiComList" :key="item.value" :label="item.label"
										:value="item.label" />
								</el-select>
							</el-form-item>
							<el-form-item label="重量:" prop="weight">
								<el-input v-model="sendForm.weight" disabled placeholder="请输入重量" />
							</el-form-item>
							<el-form-item label="快递公司编码" prop="kuaidicom">
								<el-input v-model="sendForm.kuaidicom" placeholder="" disabled />
							</el-form-item>
							<el-form-item label="价格:" prop="price">
								<el-input v-model="sendForm.price" placeholder="请输入价格" />
							</el-form-item>
							<el-button type="primary" @click="submitSendForm(sendFormRef)">
								发货
							</el-button>
						</el-form>
					</template>
				</el-dialog>
			</div>

			<el-table :data="dataList" style="width: 100%" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column prop="mergeStatus" label="是否合并" width="80">
					<template #default="scope">
						<el-tag @click="showMergeOrders(scope.row)" v-if="scope.row.mergeStatus === 'MAIN'"
							type="danger">是</el-tag>
						<el-tag v-else>否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="orderTime" label="下单时间" width="180" />
				<el-table-column prop="orderNo" label="订单号" width="180" />
				<el-table-column prop="waybillNo" label="运单号" width="300" />
				<el-table-column prop="status" label="订单状态" width="180">
					<template #default="scope">
						<dict-tag :options="wl_status" :value="scope.row.status" />
					</template>
				</el-table-column>
				<el-table-column prop="type" label="类型" width="300">
					<template #default="scope">
						<dict-tag :options="wl_type" :value="scope.row.type" />
					</template>
				</el-table-column>
				<el-table-column prop="kuaidicomName" label="快递公司" width="180" />
				<el-table-column prop="cargo" label="物品" />
				<el-table-column prop="num" label="数量" />
          <el-table-column prop="expType" label="产品类型" />
				<el-table-column prop="weight" label="总重量" width="180" />
				<el-table-column prop="orderTime" label="下单时间" width="180" />
				<el-table-column prop="sendName" label="寄件人" width="180" />
				<el-table-column prop="sendPhone" label="寄件人手机" width="200" />
				<el-table-column prop="sendAddressDetail" label="寄件人地址" width="300" />
				<el-table-column prop="recName" label="收件人姓名" width="200" />
				<el-table-column prop="recPhone" label="收件人手机" width="200" />
				<el-table-column prop="recAddressDetail" label="收件人地址" width="300" />
				<el-table-column prop="smStartTime" label="预约取货时间" width="300" />
				<el-table-column prop="sendTime" label="发货时间" width="300" />
				<el-table-column fixed="right" label="操作" min-width="120">
					<template #default="scope">
						<el-button v-if="scope.row.isSend == '0'" link type="primary" size="small"
							@click="sendoutgoods(scope.$index, scope.row)">
							发货
						</el-button>
						<el-button v-if="scope.row.mergeStatus == 'MAIN' && scope.row.isSend == '0'" link type="primary"
							size="small" @click="cancelHandleMergeOrders(scope.row)">
							取消合并
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="card">
			<el-pagination :current-page="pagination.pageNum" :page-size="pagination.pageSize" background
				layout="prev, pager, next" :total="pagination.total" @size-change="handleSizeChange"
				@current-change="handlePageChange" style="justify-content: right" />
		</div>
	</div>

	<!-- 打印预览显示 -->
	<div class="print" id="printableArea">
		<!-- 打印样式 -->
		<div class="print-header">
			<div class="header">
				<img src="../../img/顺丰.png" alt="">
				<p class="header-p">{{ selectedWaybillNo }}</p>
			</div>
			<div class="qr-code">
				<div class="qr-qrcode" v-if="ruleForm.shunfengQrCodeUrl">
					<img :src="ruleForm.shunfengQrCodeUrl" alt="顺丰快递二维码">
				</div>
				<div class="qr-codetext">
					<p class="express-number">寄生通道二维码</p>
				</div>
				<div class="qr-fill">
					<p class="signature">签名 <span>Signature</span></p>
					<p class="notes">备注 <span>Signature</span></p>
					<p class="notes"></p>
				</div>
			</div>
			<div class="footer">
				<p class="customer">客户联</p>
				<p class="phone"><img src="../../img/电话.png" alt=""><span>95338</span> www.sf-express.com</p>
			</div>
		</div>
		<div class="print-body">
			<div class="print-bodyimg">
				<img src="../../img/顺丰图标.png" alt="">
				<div class="qr-fill">
					<p class="notes">备注 </p>
					<p class="notes"></p>
				</div>
				<div class="express-deliveryfelx">
					<img class="express-img" :src='ruleForm.shunfengBarCodeUrl' alt="顺丰条形码">
					<p class="express-text"><span class="x-print">运单号</span>{{ selectedWaybillNo }}</p>
				</div>
			</div>
			<p class="print-pay">此联请粘贴在快件上</p>
		</div>
	</div>

	<div class="JD-print" id="JDprintableArea">
		<!-- 京东快递单 -->
		<div class="JD-header">
			<div class="JD-jdheader">
				<div class="qr-qrcode" v-if="ruleForm.shunfengQrCodeUrl" :logoSrc="logoImg">
					<img :src="ruleForm.shunfengQrCodeUrl" alt="京东快递二维码">
				</div>
				<div class="jd-jdcode">
					<div class="js-jdmain">
						<img class="jd-img" :src="ruleForm.shunfengBarCodeUrl" alt="京东条形码">
						<p>{{ selectedWaybillNo }}</p>
					</div>
					<div class="jd-fill">
						<p class="notes">签名 </p>
						<p class="notes">备注：</p>
					</div>
				</div>
			</div>
			<div class="JD-text">
				<p class="JD-ptext">打开微信扫一扫扫描二维码寄件</p>
				<div class="jd-china">
					<p>快递-国内</p>
				</div>
				<div class="jd-time">
					<p>生效时间:{{ effectiveTime }}</p>
					<p>失效时间:{{ failureTime }}</p>
				</div>
			</div>
			<div class="jd-prompt">此联粘在包裹上</div>
		</div>
		<div class="JD-body">
			<div class="JD-jdheader">
				<div class="qr-qrcode" v-if="ruleForm.shunfengQrCodeUrl" :logoSrc="logoImg">
					<img :src="ruleForm.shunfengQrCodeUrl" alt="京东快递二维码">
				</div>
				<div class="js-jdnotes">
					<div class="jd-jdcode">
						<div class="js-jdmain">
							<img class="jd-img" :src="ruleForm.shunfengBarCodeUrl" alt="京东条形码">
							<p>{{ selectedWaybillNo }}</p>
						</div>
						<div class="jd-fill">
							<p class="notes">备注：</p>
						</div>
					</div>
					<div class="JD-text">
						<div class="jd-china">
							<p>快递-国内</p>
						</div>
						<div class="jd-time">
							<p>生效时间:{{ effectiveTime }}</p>
							<p>失效时间:{{ failureTime }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div>
		<!-- 详情页 -->
		<el-dialog v-model="showDetails" title="订单详情" width="500" :before-close="handleClose">
			<!--订单的详细信息 -->
			<div class="order-details" v-if="selectedOrder">
				<div>
					<p>订单号: {{ selectedOrder.orderNo }}</p>
					<p>运单号: {{ selectedOrder.waybillNo }}</p>
					<p>物品：{{ selectedOrder.cargo }}</p>
					<p>数量：{{ selectedOrder.num }}</p>
					<p>总重量：{{ selectedOrder.weight }}kg</p>
					<p>寄件人姓名：{{ selectedOrder.sendName }}</p>
					<p>寄件人手机：{{ selectedOrder.sendPhone }}</p>
					<p>寄件人地址：{{ selectedOrder.sendAddressDetail }}</p>
					<p>收件人姓名：{{ selectedOrder.recName }}</p>
					<p>收件人手机：{{ selectedOrder.recPhone }}</p>
					<p>收件人地址：{{ selectedOrder.recAddressDetail }}</p>
					<p>快递公司：{{ selectedOrder.kuaidicomName }}</p>
					<p>发货时间：{{ selectedOrder.sendTime }}</p>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="showDetails = false">取消</el-button>
					<el-button type="primary" @click="showDetails = false">
						确认
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
.active {
	color: #fff;
	background-color: #0082fa;
}

::v-deep .el-dialog__body {
	padding: 0;
}

.demo-ruleForm .el-form-item {
	flex-direction: column;
}

.above {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.above span {
	font-size: 12px;
}

.wp {
	margin-left: 30px;
}

.wp .demo-ruleForm {
	flex-direction: column;
}

.demo-ruleForm {
	display: flex;
	justify-content: space-around;
}

.demo-ruleForm>div {
	width: 500px;
}

.btns {
	margin-bottom: 20px;
}

.card {
	background: #fff;
	margin: 20px;
	padding: 20px 20px 0 20px;
}

.sender-fontwant {
	font-size: 18px;
	font-weight: 600;
	margin: 10px;
}

::v-deep .navigation {
	margin-top: 10px;
	background-color: #fff2e5;
	color: #ff8923;
	text-align: left;
	font-size: 12px;
	padding: 5px;
}

.expresssmo {
	width: 100px;
	height: 90px;
	margin-left: 40px;
	overflow: hidden;
	text-align: center;
	border-radius: 5px;
	box-shadow: 0px 0px 10px #b3b0b0;
}

.expresssmo>:nth-child(1) {
	border-bottom: 1px solid #b3b0b0;
	font-size: 14px;
	margin-bottom: 10px;
}

::v-deep .el-form-item__content {
	flex-wrap: nowrap;
}

.expressdeliveryfelx {
	display: flex;
}

.number-plea {
	width: 400px;
	margin-left: 40px;
	display: flex;
	align-items: center;
}

// 打印

.print-header {
	border-bottom: 1px dashed;
	margin-bottom: 5px;
}

.header {
	border-bottom: 2px solid;
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	font-weight: 700;
}

// .header-p.show {
// 	color: #0082fa;
// }

.header img {
	width: 170px;
	height: 50px;
	margin-left: -30px;
}

.header .express-number {
	font-size: 16px;
	margin: 5px 0;
}

.footer {
	display: flex;
	font-size: 14px;
	width: 330px;
	height: 35px;
	margin-left: 11%;
	margin-top: -10px;
	margin-bottom: 5px;
}

.express-deliveryfelx {
	display: flex;
	flex-direction: column;
	align-items: center;
}


.js-jdmain {
	display: flex;
	flex-direction: column;
	align-items: center;

	p {
		font-size: 16px;
		margin-top: -1px;
	}
}

.customer,
.phone {
	background-color: red;
	color: #fff;
	padding: 1px 5px;
	font-size: 16px;
}

.phone {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	background-color: black;
	font-size: 14px;
	width: 250px;

	span {
		font-size: 16px;
		margin-right: 10px;
	}
}

.x-print {
	padding: 3px;
	background-color: red;
	color: #fff;
	margin-right: 3px;
}

.qr-code {
	display: flex;
	flex-wrap: nowrap;
}

.express-text {
	margin-top: 5px;
}

.express-number {
	color: #fff;
	background: red;
	padding: 3px 5px;
	box-sizing: border-box;
	border-radius: 3px; // 添加圆角
}

.qr-qrcode {
	margin-right: 10px;
}

.qr-qrcode img {
	width: 150px;
	height: 150px;
}

.qr-code img {
	width: 40mm;
	height: 40mm;
	border: 3px solid #5c5c5b;
	border-radius: 15px;
}

.qr-codetext {
	text-orientation: upright;
	width: 20px;
	height: 160px;
	display: flex;
	justify-content: center;
	align-items: center;

}

.qr-codetext p {
	text-align: center;
}

.qr-fill {
	margin-left: 10px;
	width: 42.8%;
	display: flex;
	flex-direction: column;
}

.qr-fill .notes,
.signature {
	border-bottom: 1px dashed;
}

.signature,
.notes {
	height: 25px;
	font-size: 16px;
	font-weight: 700;

	span {
		color: #5c5b59;
		font-size: 12px;
	}
}

.express-img {
	width: 250px !important;
	margin-top: 5px;
}

.notes p {
	font-size: 16px;
	margin: 10px 0;
}

.footer img {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	margin-right: 5px;
}

.footer p {
	margin: 5px 0;
	font-weight: 700;
}

.print-bodyimg {
	display: flex;
	margin-top: 2%;

	img {
		width: 100px;
		height: 100px;
	}

	.qr-fill {
		margin-top: 10px;
		width: 10%;

	}
}

.print {
	display: none;
	/* 默认隐藏 */
}

.print.show {
	display: block !important;
	/* 打印时显示 */
}

.JD-print {
	display: none;
	/* 默认隐藏 */
}

.JD-print.show {
	display: block !important;
	/* 打印时显示 */
}

.print-pay {
	width: 150px;
	padding: 2px;
	box-sizing: border-box;
	background-color: #bdbcc2;
	color: #494a4e;
	margin-top: 0px;
}

// 京东快递单
.JD-jdheader {
	display: flex;
	align-items: center;
}

.jd-jdcode {
	display: flex;
	flex-direction: column;
}

.jd-fill {
	.notes {
		font-weight: 400;
	}
}

.JD-text {
	display: flex;
	margin-left: 15px;
	margin-top: -20px;

	.JD-ptext {
		width: 120px;
	}
}

.jd-china {
	width: 80px;
	height: 50px;
	border: 1px dashed;
	border-radius: 10px; // 添加圆角
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20px;
	margin-top: 5px;
}

.jd-time {
	margin-left: 15px;
}

.jd-prompt {
	width: 120px;
	margin-left: 18.5%;
}

.js-jdnotes {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	.JD-text {
		margin-left: 0;
		align-items: center;
	}

	.jd-china {
		margin-left: 0;
	}

	.jd-jdcode {
		margin-bottom: 0;
	}
}

.jd-img {
	width: 300px !important;
	height: 40px;
	margin-top: 15px;
}

.ico-img {
	width: 150px;
	transform: rotate(90deg);
	/* 旋转 90 度 */
	display: block;
	/* 防止图片与其他内容冲突 */
	margin: 10px auto auto auto;
	/* 增加 margin-top 的值来让图片向下移动，视情况调整 */
	height: auto;
	/* 可视需求调整宽高度 */
}

// 详情页
.order-details {
	padding: 0px 20px;
}
</style>
